<template>
	<view class="frequency-container">
		<!-- 页面头部 -->
		<view class="header">
			<view class="title">回收详细</view>
			<view class="subtitle">让每一次回收都有意义</view>
		</view>
		
		<!-- 回收统计卡片 -->
		<view class="stats-card">
			<view class="stats-title">本月回收统计</view>
			<view class="stats-content">
				<view class="stat-item">
					<view class="stat-number">{{monthlyStats.totalCount}}</view>
					<view class="stat-label">总回收量</view>
				</view>
				<view class="stat-item">
					<view class="stat-number">{{monthlyStats.totalWeight}}kg</view>
					<view class="stat-label">总重量</view>
				</view>
				<view class="stat-item">
					<view class="stat-number">{{monthlyStats.carbonPoints}}</view>
					<view class="stat-label">碳积分</view>
				</view>
			</view>
		</view>
		
		<!-- 主要回收物品展示 -->
		<view class="recyclable-items">
			<view class="section-title">主要回收物品</view>
			<view class="items-grid">
				<view class="item-card" v-for="(item, index) in recyclableItems" :key="index">
					<view class="item-icon">♻️</view>
					<view class="item-info">
						<view class="item-name">{{item.name}}</view>
						<view class="item-desc">{{item.description}}</view>
						<view class="item-price">{{item.price}}元/kg</view>
					</view>
					<view class="item-count">已回收: {{item.count}}个</view>
				</view>
			</view>
		</view>
		
		<!-- 环保垃圾桶信息 -->
		<view class="bins-section">
			<view class="section-title">附近环保垃圾桶</view>
			<view class="bins-list">
				<view class="bin-item" v-for="(bin, index) in nearbyBins" :key="index" @click="showBinDetail(bin)">
					<view class="bin-icon">🗑️</view>
					<view class="bin-info">
						<view class="bin-name">{{bin.name}}</view>
						<view class="bin-address">{{bin.address}}</view>
						<view class="bin-status" :class="bin.status === 'available' ? 'available' : 'full'">
							{{bin.status === 'available' ? '可用' : '已满'}}
						</view>
					</view>
					<view class="bin-distance">{{bin.distance}}km</view>
				</view>
			</view>
		</view>
		
		<!-- 回收记录 -->
		<view class="records-section">
			<view class="section-title">回收记录</view>
			<view class="records-list">
				<view class="record-item" v-for="(record, index) in recyclingRecords" :key="index">
					<view class="record-header">
						<view class="record-date">{{record.date}}</view>
						<view class="record-time">{{record.time}}</view>
					</view>
					<view class="record-content">
						<view class="record-items">
							<text v-for="(item, index) in record.items" :key="index" class="record-item-tag">
								{{item.name}} x{{item.count}}
							</text>
						</view>
						<view class="record-weight">重量: {{record.weight}}kg</view>
						<view class="record-points">获得积分: {{record.points}}</view>
					</view>
					<view class="record-location">
						<text class="location-icon">📍</text>
						{{record.location}}
					</view>
				</view>
			</view>
		</view>
		
		<!-- 回收指南 -->
		<view class="guide-section">
			<view class="section-title">回收指南</view>
			<view class="guide-content">
				<view class="guide-item" v-for="(guide, index) in recyclingGuides" :key="index">
					<view class="guide-icon">{{guide.icon}}</view>
					<view class="guide-text">{{guide.text}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				monthlyStats: {
					totalCount: 156,
					totalWeight: 23.5,
					carbonPoints: 89
				},
				recyclableItems: [
					{
						id: 1,
						name: '塑料瓶',
						description: 'PET塑料瓶，饮料瓶等',
						price: 2.5,
						count: 45,
						icon: '/static/icons/plastic-bottle.png'
					},
					{
						id: 2,
						name: '玻璃瓶',
						description: '酒瓶、饮料瓶等',
						price: 1.8,
						count: 32,
						icon: '/static/icons/glass-bottle.png'
					},
					{
						id: 3,
						name: '易拉罐',
						description: '铝制易拉罐',
						price: 3.2,
						count: 28,
						icon: '/static/icons/can.png'
					},
					{
						id: 4,
						name: '纸类',
						description: '纸板、报纸等',
						price: 1.2,
						count: 51,
						icon: '/static/icons/paper.png'
					}
				],
				nearbyBins: [
					{
						id: 1,
						name: '社区回收站A',
						address: '阳光小区东门',
						status: 'available',
						distance: 0.3
					},
					{
						id: 2,
						name: '环保回收点B',
						address: '商业街北侧',
						status: 'available',
						distance: 0.8
					},
					{
						id: 3,
						name: '智能回收箱C',
						address: '公园西门',
						status: 'full',
						distance: 1.2
					}
				],
				recyclingRecords: [
					{
						id: 1,
						date: '2024-01-15',
						time: '14:30',
						items: [
							{name: '塑料瓶', count: 5},
							{name: '易拉罐', count: 3}
						],
						weight: 2.1,
						points: 15,
						location: '社区回收站A'
					},
					{
						id: 2,
						date: '2024-01-12',
						time: '09:15',
						items: [
							{name: '玻璃瓶', count: 4},
							{name: '纸类', count: 2}
						],
						weight: 3.2,
						points: 22,
						location: '环保回收点B'
					},
					{
						id: 3,
						date: '2024-01-08',
						time: '16:45',
						items: [
							{name: '塑料瓶', count: 8},
							{name: '易拉罐', count: 6}
						],
						weight: 4.5,
						points: 28,
						location: '智能回收箱C'
					}
				],
				recyclingGuides: [
					{
						id: 1,
						icon: '♻️',
						text: '塑料瓶请清空内容物并压扁'
					},
					{
						id: 2,
						icon: '🧽',
						text: '玻璃瓶请清洗干净，避免破碎'
					},
					{
						id: 3,
						icon: '📦',
						text: '纸类请保持干燥，避免污染'
					},
					{
						id: 4,
						icon: '⚠️',
						text: '危险物品请勿放入回收箱'
					}
				]
			};
		},
		methods: {
			showBinDetail(bin) {
				uni.showModal({
					title: bin.name,
					content: `地址: ${bin.address}\n状态: ${bin.status === 'available' ? '可用' : '已满'}\n距离: ${bin.distance}km`,
					showCancel: false,
					confirmText: '知道了'
				});
			}
		}
	}
</script>

<style lang="scss">
	.frequency-container {
		min-height: 100vh;
		background: linear-gradient(135deg, #e8f5e8 0%, #f0f8f0 100%);
		padding: 20rpx;
	}
	
	.header {
		text-align: center;
		margin-bottom: 30rpx;
		
		.title {
			font-size: 36rpx;
			font-weight: bold;
			color: #2e7d32;
			margin-bottom: 10rpx;
		}
		
		.subtitle {
			font-size: 24rpx;
			color: #666;
		}
	}
	
	.stats-card {
		background: white;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1);
		
		.stats-title {
			font-size: 28rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 20rpx;
			text-align: center;
		}
		
		.stats-content {
			display: flex;
			justify-content: space-around;
			
			.stat-item {
				text-align: center;
				
				.stat-number {
					font-size: 32rpx;
					font-weight: bold;
					color: #4caf50;
					margin-bottom: 8rpx;
				}
				
				.stat-label {
					font-size: 24rpx;
					color: #666;
				}
			}
		}
	}
	
	.section-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		margin: 30rpx 0 20rpx 0;
		padding-left: 20rpx;
		border-left: 6rpx solid #4caf50;
	}
	
	.recyclable-items {
		margin-bottom: 30rpx;
		
		.items-grid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 20rpx;
			
			.item-card {
				background: white;
				border-radius: 16rpx;
				padding: 20rpx;
				box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.08);
				
				.item-icon {
					width: 60rpx;
					height: 60rpx;
					margin-bottom: 15rpx;
					font-size: 40rpx;
					text-align: center;
					line-height: 60rpx;
				}
				
				.item-name {
					font-size: 26rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 8rpx;
				}
				
				.item-desc {
					font-size: 22rpx;
					color: #666;
					margin-bottom: 8rpx;
				}
				
				.item-price {
					font-size: 24rpx;
					color: #ff6b35;
					font-weight: bold;
					margin-bottom: 8rpx;
				}
				
				.item-count {
					font-size: 22rpx;
					color: #4caf50;
					background: #e8f5e8;
					padding: 6rpx 12rpx;
					border-radius: 20rpx;
					text-align: center;
				}
			}
		}
	}
	
	.bins-section {
		margin-bottom: 30rpx;
		
		.bins-list {
			.bin-item {
				background: white;
				border-radius: 16rpx;
				padding: 20rpx;
				margin-bottom: 15rpx;
				display: flex;
				align-items: center;
				box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.08);
				
				.bin-icon {
					font-size: 40rpx;
					margin-right: 20rpx;
				}
				
				.bin-info {
					flex: 1;
					
					.bin-name {
						font-size: 26rpx;
						font-weight: bold;
						color: #333;
						margin-bottom: 8rpx;
					}
					
					.bin-address {
						font-size: 22rpx;
						color: #666;
						margin-bottom: 8rpx;
					}
					
					.bin-status {
						font-size: 20rpx;
						padding: 4rpx 12rpx;
						border-radius: 20rpx;
						
						&.available {
							background: #e8f5e8;
							color: #4caf50;
						}
						
						&.full {
							background: #ffebee;
							color: #f44336;
						}
					}
				}
				
				.bin-distance {
					font-size: 24rpx;
					color: #999;
				}
			}
		}
	}
	
	.records-section {
		margin-bottom: 30rpx;
		
		.records-list {
			.record-item {
				background: white;
				border-radius: 16rpx;
				padding: 20rpx;
				margin-bottom: 15rpx;
				box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.08);
				
				.record-header {
					display: flex;
					justify-content: space-between;
					margin-bottom: 15rpx;
					
					.record-date {
						font-size: 24rpx;
						color: #333;
						font-weight: bold;
					}
					
					.record-time {
						font-size: 22rpx;
						color: #999;
					}
				}
				
				.record-content {
					margin-bottom: 15rpx;
					
					.record-items {
						margin-bottom: 10rpx;
						
						.record-item-tag {
							display: inline-block;
							background: #e3f2fd;
							color: #1976d2;
							padding: 6rpx 12rpx;
							border-radius: 20rpx;
							font-size: 20rpx;
							margin-right: 10rpx;
							margin-bottom: 8rpx;
						}
					}
					
					.record-weight, .record-points {
						font-size: 22rpx;
						color: #666;
						margin-bottom: 5rpx;
					}
					
					.record-points {
						color: #4caf50;
						font-weight: bold;
					}
				}
				
				.record-location {
					font-size: 22rpx;
					color: #999;
					
					.location-icon {
						margin-right: 8rpx;
					}
				}
			}
		}
	}
	
	.guide-section {
		margin-bottom: 30rpx;
		
		.guide-content {
			.guide-item {
				background: white;
				border-radius: 16rpx;
				padding: 20rpx;
				margin-bottom: 15rpx;
				display: flex;
				align-items: center;
				box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.08);
				
				.guide-icon {
					font-size: 32rpx;
					margin-right: 20rpx;
				}
				
				.guide-text {
					font-size: 24rpx;
					color: #333;
					line-height: 1.5;
				}
			}
		}
	}
</style>
